<template>
	<view class="app-pages">
		<view class="time" @click="handleShowDate">
			<view class="date">
				<view class="">{{options.time[0] | dateFormat}}</view>
				<u-icon name="minus" color="rgb(144, 147, 153)" size="24" :customStyle="{margin:'0 12rpx'}"></u-icon>
				<view class="">{{options.time[options.time.length - 1] | dateFormat}}</view>
			</view>
			<view class="">共{{options | MONEY_DAY}}晚</view>
		</view>
		<view class="introduce">
			<view class="shop">
				<image class="image" :src="options.imageUrl" mode="aspectFill"></image>
				<view class="">
					<view class="shop-title">{{options.goodsName||''}}</view>
					<view class="shop-tips">{{options.f2||''}}</view>
				</view>
			</view>
			<view class="introduce-btn tips" @click="handleUPopupShow">订房必读</view>
		</view>

		<view class="room">
			<view class="title">订房信息</view>
			<u-number-box v-model="value" :max="options.maxInventory" @overlimit="handleOverlimit">
				<view slot="minus" class="minus">
					<u-icon name="minus" size="12" color="rgb(144, 147, 153)"></u-icon>
				</view>
				<text slot="input" style="width: 60rpx;text-align: center;" class="input">{{value}}间</text>
				<view slot="plus" class="plus">
					<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
				</view>
			</u-number-box>
		</view>

		<u--form labelPosition="left" :model="form" :rules="formRules" ref="uForm" label-width="200rpx">
			<u-form-item :prop="'arr.'+index+'.userName'" borderBottom v-for="(item,index) in form.arr" :key="index"
				label-width="0rpx">
				<view class="">
					<view class="form-item">
						<view class="" style="width: 200rpx;">
							{{'房间'+(index+1)}}
						</view>
						<view class="flex-input">
							<u--input v-model="item.userName" border="none" placeholder="请输入姓名"></u--input>
							<u-icon name="account" :size="24" @click="handleSelecotr(1,index)"></u-icon>

						</view>
					</view>
					<view class="form-item-tips" v-if="(form.arr.length-1) == index">请输入住客姓名，每间仅需填1人，姓名不可重复</view>
				</view>
			</u-form-item>

			<u-form-item label="+ 86" :borderBottom="false">
				<u--input v-model.number="form.arrivePhone" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>

			<u-form-item label="特殊要求" :borderBottom="false">
				<u--textarea v-model="form.remark" placeholder="请输入内容" autoHeight count :maxlength="50"
					:show-confirm-bar="false" @input="handleInput"></u--textarea>
			</u-form-item>
		</u--form>

		<!-- 订房必读 -->
		<u-popup :show="uPopupShow" mode="bottom" round="10" :closeOnClickOverlay="true">
			<view class="popup-1">
				<view class="title">
					<view class=""></view>
					<view style="display: flex; align-items: center;">
						<u-icon name="error-circle" size="28rpx" color="#FF4040"></u-icon>
						<text style="margin-left: 12rpx;">订房必读</text>
					</view>
					<view class="close-icon">
						<u-icon @click="handleClose" name="close-circle" size="34rpx" color="rgb(144, 147, 153)">
						</u-icon>
					</view>
				</view>

				<blockquote v-for="item in readingListData" :key="item.configId" style="margin-bottom: 16rpx;">
					<view class="label">{{item.title}}</view>
					<view class="content">{{item.content}}</view>
				</blockquote>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-picker :show="show" :columns="columns" title="预计到店时间" closeOnClickOverlay @cancel="close" @close="close"
			@confirm="confirm"></u-picker>
		<u-modal :show="show1" @confirm="handleConfirm">
			<view class="slot-content" style="text-align: center;">
				你已成功预订
			</view>
		</u-modal>

		<!-- 日期 -->
		<u-calendar ref="u-calendar" :show="showTimeSlector" color="#f74062" mode="range"
			@close="showTimeSlector = false" @confirm="e=>handleDateConfirm(e,true)" :defaultDate="defaultDateMultiple"
			:monthNum="12" :endText="endText" :startText="startText" :isShowTop="true"></u-calendar>

		<!-- 明细 -->
		<view class="detailed">
			<view class="content" v-if="detailedShow">
				<view class="title">订单明细</view>
				<view class="item total">
					<text class="item-tips1">{{selectorDateData[0].goodsName}}</text>
					<text class="item-tips2">￥{{selectorDateData | totalFilters}}</text>
				</view>

				<view class="item" v-for="(item,index) in selectorDateData" :key="index"
					v-if="index != (selectorDateData.length - 1)">
					<text class="item-tips1">{{item.dayTime | YYYY_MM_DD}}</text>
					<text class="item-tips2">{{item.dayPrice != '暂无报价'? '￥'+ item.dayPrice +' × ' + value :'暂无报价'}}</text>
				</view>
			</view>
			<view class="control">
				<view class="price">￥{{selectorDateData | totalFilters}}</view>
				<view class="right">
					<view class="detailed-tips" @click="handleDetailed">明细</view>
					<view class="submit" :style="lockSubmit?'':'background-color:#cccccc'" @click="handleSubmit">预订
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		hotelOrderAddHotelOrder,
		hotelReadingList,
		goodsIdDetails,
		pricecalendarList,
	} from "@/http";
	import icon from "../../uni_modules/uview-ui/libs/config/props/icon";
	let _this;
	export default {
		data() {
			return {
				endText: '离开',
				startText: '入住',
				uPopupShow: false,
				defaultDateMultiple: [],
				showTimeSlector: false,
				show: false,
				show1: false,
				detailedShow: false,
				columns: [
					["00:30:00", "01:00:00", "01:30:00", "02:00:00", "02:30:00", "03:00:00", "03:30:00", "04:00:00",
						"04:30:00", "05:00:00", "05:30:00", "06:00:00", "06:30:00", "07:00:00", "07:30:00", "08:00:00",
						"08:30:00", "09:00:00", "09:30:00", "10:00:00", "10:30:00", "11:00:00", "11:30:00", "12:00:00",
						"12:30:00", "13:00:00", "13:30:00", "14:00:00", "14:30:00", "15:00:00", "15:30:00", "16:00:00",
						"16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00", "20:00:00",
						"20:30:00", "21:00:00", "21:30:00", "22:00:00", "22:30:00", "23:00:00", "23:30:00"
					]
				],
				value: 1,
				value1: '',
				index: 0,
				form: {
					arr: [{
						userName: ''
					}],
					arrivePhone: '',
					remark: '',
					arrivrTime: '16:00'
				},
				formRules: {
					userName: {
						required: false,
						message: '请输入姓名',
						trigger: 'bulr'
					},
					arrivePhone: {
						required: false,
						message: '请输入手机号',
						trigger: 'bulr'
					}
				},
				options: {
					time: []
				},
				readingListData: [],
				dateData: [],
				selectorDateData: [],
				lockSubmit: true
			}
		},
		watch: {
			value(numbz) {
				this.resFn(numbz)
			}
		},
		onReady() {
			this.$refs['u-calendar'].setFormatter(this.formatter);
		},
		async onLoad(data) {
			_this = this;
			uni.setNavigationBarTitle({
				title: '梅地亚中心'
			});
			this.options = JSON.parse(data.options);
			this.options.fromOnshowTime = new Date(this._dateFormat('YYYY/mm/dd',new Date(Number(this.options.fromOnshowTime)))).getTime();
			this.options.lastOnshowTime =  Number(this.options.lastOnshowTime) == 0? 0: new Date(this._dateFormat('YYYY/mm/dd',new Date(Number(this.options.lastOnshowTime)))).getTime();
			this.defaultDateMultiple = this.options.time;
			this.resFn(1);
			// 订房必读
			let res1 = await hotelReadingList();
			this.readingListData = res1.data.rows;

			let date = new Date();
			let arrAjax = []
			for (let i = 0; i < 12; i++) {
				date.setMonth(date.getMonth() + 1);
				arrAjax.push(pricecalendarList({
					dayTime: `${date.getFullYear()}-${date.getMonth() < 10 ? '0' + (date.getMonth()) :date.getMonth()}`,
					goodsId: this.options.goodsId
				}));
			};
			let arrAjaxData = await Promise.all(arrAjax);
			arrAjaxData.forEach(res => {
				this.dateData = [...this.dateData, ...res.data.rows];
			});

			this.handleDateConfirm(this.defaultDateMultiple);

			let orderContent = uni.getStorageSync('order_content');
			if (!orderContent) return;
			// 清空
			uni.setStorageSync('order_content', '');
		},
		onShow() {
			let peopleData = '';
			if (uni.getStorageSync('people_data')) {
				peopleData = uni.getStorageSync('people_data');
				this.form.arr[this.index].userName = peopleData.userName
				uni.setStorageSync('people_data', ''); // 清空
			}
		},
		methods: {
			handleDetailed() {
				this.detailedShow = !this.detailedShow;
			},
			formatter(day) {
				let nowTime = `${day.date.getFullYear()}-${day.date.getMonth()+1}-${day.date.getDate()}`;
				day.bottomInfo = `暂无报价`;
				for (let i in this.dateData) {
					let dayTime = new Date(this.dateData[i].dayTime);
					dayTime = `${dayTime.getFullYear()}-${dayTime.getMonth()+1}-${dayTime.getDate()}`;
					if (dayTime == nowTime) {
						nowTime = new Date(nowTime.replaceAll('-','/')).getTime();
						if(this.dateData[i].closingType == 1 && this.options.fromOnshowTime<=nowTime){
							if(this.options.lastOnshowTime>=nowTime || this.options.lastOnshowTime == 0){
								day.bottomInfo = '已关房';
								return day;								
							}
						}
						if(this.options.lastOnshowTime != 0 && this.options.lastOnshowTime<=nowTime){
							day.bottomInfo = '未上架';
							return day;		
						}
						day.bottomInfo = `￥${this.dateData[i].dayPrice}`; //钱
						return day
					}
				};
				return day;
			},
			async handleDateConfirm(options,blo) {
				let data = [];
				this.dateData.forEach(item => {
					options.forEach(_item => {
						if (_item == this._dateFormat("YYYY-mm-dd", new Date(item.dayTime))) data.push(
							item);
					});
				});
				
				if(blo){ //校验区
				let nowTime;
					if(data.some(item=> { //关房
						 nowTime = new Date(this._dateFormat("YYYY/mm/dd", new Date(item.dayTime))).getTime();
						if(this.options.fromOnshowTime<=nowTime){
							if(this.options.lastOnshowTime>=nowTime || this.options.lastOnshowTime == 0){
								return item.closingType == 1
							}
						}
						return false;
					})) return uni.showToast({
						title: `${this.options.goodsName}${this._dateFormat("YYYY-mm-dd", new Date(nowTime))}日为关房状态，不能预约`,
						icon: 'none'
					});
					
					if(data.some(item=> { //未上架
						 nowTime = new Date(this._dateFormat("YYYY/mm/dd", new Date(item.dayTime))).getTime();
						if(this.options.lastOnshowTime != 0 && this.options.lastOnshowTime<=nowTime){
							return true;
						}
						return false;
					})) return uni.showToast({
						title: `${this.options.goodsName}${this._dateFormat("YYYY-mm-dd", new Date(nowTime))}日为未上架状态，不能预约`,
						icon: 'none'
					});
					
					if(options.length != data.length) return uni.showToast({ //暂无报价
						title: `${this.options.goodsName}${options[0]}日为暂无报价状态，不能预约`,
						icon: 'none'
					});
					
				}
				
				this.lockSubmit = true;;
				this.selectorDateData = [];
				// 补数据
				options.forEach(item => {
					let lock = data.some(_item => item == this._dateFormat("YYYY-mm-dd", new Date(_item.dayTime)));
					if (!lock) {
						this.lockSubmit = false;
						data.push({
							dayTime: item,
							dayPrice: '暂无报价'
						})
					}
				});
				this.selectorDateData = data;
				this.showTimeSlector = false;
				this.options.time = [options[0], options[options.length - 1]];
			},
			_dateFormat(fmt, date) {
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			},

			handleShowDate() {
				this.$nextTick(() => {
					this.showTimeSlector = true;
				})
			},
			handleInput(val) {
				setTimeout(() => {
					this.form.remark = val.slice(0, 50);
				}, 5);
			},
			handleUPopupShow() {
				this.uPopupShow = true;
				if (!this.readingListData) return uni.showToast({
					title: "当前没有配置内容",
					icon: "none"
				})

				if (!this.readingListData.length) return uni.showToast({
					title: "当前没有配置内容",
					icon: "none"
				})
			},
			handleOverlimit(options) {
				if (options == 'plus') return uni.showToast({
					title: "您选购的房型库存不足，不能再加啦",
					icon: "none"
				});
			},
			handleClose() {
				this.uPopupShow = false;
			},
			handleConfirm() {
				this.show1 = false;
				uni.navigateBack();
			},
			resFn(numbz) {
				let numb = numbz;
				let arr = [];
				for (let i = 0; i < numb; i++) {
					if (this.form.arr[i]) {
						arr.push(this.form.arr[i])
					} else {
						arr.push({
							userName: ''
						})
					}
				};
				this.form.arr = arr;
			},
			handleSelecotr(numb, index) { //去选择角色
				this.index = index;
				if (numb == 1) return uni.navigateTo({
					url: '/homePages/scenicSpot/passengers'
				});
				if (numb == 2) {
					this.form.arr.push({
						userName: ""
					});
				}
			},
			async handleSubmit() {
				try {
					if (!this.lockSubmit) return;
					let data = {
						inTime: this.options.time[0],
						outTime: this.options.time[this.options.time.length - 1],
						goodsId: this.options.goodsId,
						goodsName: this.options.goodsName,
						...this.form
					};
					let arr = [];
					let reg = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
					data.arr.forEach(item => {
						if (item.userName) arr.push(item.userName);
					});
					data.userName = arr.toString();
					let dataSet = [...new Set(arr)];
					if (dataSet.length != arr.length) return uni.showToast({
						title: "姓名不能重复",
						icon: "error"
					});

					let arrTest = data.arr.map(item => {
						return item.userName;
					});
					for (let i in arrTest) {
						if (!arrTest[i]) return uni.showToast({
							title: "请输入姓名",
							icon: "error"
						});
					};

					if (!data.arrivrTime) return uni.showToast({
						title: "请选择到店时间",
						icon: "error"
					})
					if (!reg.test(data.arrivePhone)) return uni.showToast({
						title: "电话格式不正确",
						icon: "error"
					});
					delete data.arr;
					data.inTime = this.dateFormat(data.inTime);
					data.outTime = this.dateFormat(data.outTime);
					data.arrivrTime = `${data.arrivrTime}:00:00`;
					data.goodsId = this.options.goodsId;
					data.totalPrice = this.getTotalPrice(this.selectorDateData);
					data.factor = this.selectorDateData.slice(0, this.selectorDateData.length - 1).map((item,
					index) => {
						return item.dayPrice * Number(this.value) || 0
					}).toString(',');
					uni.showLoading({
						title: "正在预约..."
					});
					let res = await hotelOrderAddHotelOrder(data);
					uni.hideLoading();
					this.show1 = true;
				} catch (err) {
					uni.hideLoading();
					console.log('出错了', err)
				}
			},
			handleTime() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm(options) {
				this.form.arrivrTime = options.value[0];
				this.close()
			},
			dateFormat(date, fmt = "YYYY-mm-dd") {
				if (!date) return '';
				date = new Date(date);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			},
			getTotalPrice(arr) {
				let total = 0
				arr.forEach((item, index) => {
					if (index != (arr.length - 1)) {
						if (!isNaN(Number(item.dayPrice))) {
							total = total + Number(item.dayPrice);
						};
					}
				});
				if (_this && _this.value) return total * _this.value;
				return '';
			}
		},
		filters: {
			totalFilters(arr) {
				let total = 0
				arr.forEach((item, index) => {
					if (index != (arr.length - 1)) {
						if (!isNaN(Number(item.dayPrice))) {
							total = total + Number(item.dayPrice);
						};
					}
				});
				if (_this && _this.value) return total * _this.value;
				return '';
			},
			MONEY_DAY(options) {
				if (!options || !options.time[0] || !options.time[options.time.length - 1]) return "";
				const time = (date1, date2) => {
					let numb = date2.getTime() - date1.getTime();
					let min = numb / 1000 / 60;
					let s = numb / 1000;
					let hours = numb / 1000 / 60 / 60;
					let day = numb / 1000 / 60 / 60 / 24;
					let mon = numb / 1000 / 60 / 60 / 24 / 30;
					return `${Math.ceil(day)}`;
				};
				let times = JSON.stringify(options.time);
				times = JSON.parse(times.replace(/\-/g, "/"));
				return time(new Date(times[0]), new Date(times[times.length - 1]));
			},
			dateFormat(date) {
				if (!date) return '';
				let fmt = "mm月dd日";
				date = new Date(date);
				let week = function() {
					var day = date.getDay();
					var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
					var week = weeks[day];
					return week
				}();
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt + " " + week;
			},
			YYYY_MM_DD(date) {
				if (!date) return '';
				let fmt = "YYYY-mm-dd";
				date = new Date(date);
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString() // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
					}
				}
				return fmt;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.detailed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 0rpx;
		background-color: #FFFFFF;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 9;

		.content {
			padding-bottom: 100rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f2f2f2;
			}

			.item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 30rpx 0 30rpx;

				.item-tips1,
				.item-tips2 {
					color: #666666;
				}
			}

			.total {

				.item-tips1,
				.item-tips2 {
					color: #333333;
				}
			}
		}

		.control {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
		}

		.price {
			color: #F59A23;
		}

		.right {
			display: flex;
			align-items: center;

			.detailed-tips {
				margin-right: 30rpx;
			}
		}
	}

	.popup-1 {
		padding: 20rpx 30rpx 60rpx 50rpx;
		box-sizing: border-box;
		min-height: 520rpx;

		.title {
			position: relative;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.label {
			font-size: 28rpx;
			font-weight: bold;
			position: relative;
			padding-bottom: 8rpx;

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: -20rpx;
				transform: translate(0, -50%);
				border-radius: 50%;
				background-color: #333333;
				width: 8rpx;
				height: 8rpx;
			}
		}

		.content {
			font-size: 26rpx;
			color: #333333;
		}
	}

	.flex-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.tips {
		// padding-top: 20rpx;
		// font-size: 26rpx;
		color: #F59A23;
	}

	.popup {
		width: 700rpx;

		.cell {
			box-shadow: none;
			margin-top: 0;

			.label {
				padding-left: 30rpx;
				padding-top: 20rpx;
			}

			.padding {
				padding: 0 40rpx;
			}
		}
	}

	.flex-space {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.submit {
		padding: 10rpx 25rpx;
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #F59A23;
	}

	.form-item-tips {
		font-size: 22rpx;
		color: rgba(255, 110, 0, 1);
		background-color: rgba(255, 110, 0, 0.1);
		padding: 14rpx 10rpx;
		margin-left: 10rpx;
		margin-top: 20rpx;
		display: inline-block;
	}

	.room {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.introduce {
		display: flex;
		margin: 20rpx 0 30rpx 0;
		align-items: flex-end;
		justify-content: space-between;

		.shop {
			display: flex;

			.image {
				width: 260rpx;
				height: 180rpx;
				margin-right: 60rpx;
			}

			.shop-title {
				font-weight: bold;
				font-size: 30rpx;
				margin-top: 20rpx;
			}

			.shop-tips {
				font-size: 26rpx;
				margin-top: 16rpx;
			}
		}

		.introduce-btn {
			font-weight: bold;
			white-space: nowrap;
		}
	}

	.time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;

		.date {
			display: flex;
			align-items: center;
		}
	}



	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
		white-space: nowrap;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
